/*
 * @Description: 饼状图
 * @Author: Zzt
 * @Date: 2022-11-10 09:19:30
 * @LastEditTime: 2022-11-28 16:06:52
 */

import { useEcharts } from '@/hooks/useEcharts';
import * as echarts from 'echarts';
import { useEffect, useMemo, useState } from 'react';

interface IBasicPieChart {
  color?: any;
  data: any;
}
const BasicPieChart = (props: IBasicPieChart) => {
  const { data } = props;
  const [color, setColor] = useState('');
  console.log(data[1]?.value / (data[0]?.value + data[1]?.value) > 0.5);
  useEffect(() => {
    const value = data[1].value / (data[0].value + data[1].value);
    if (value >= 0.5) {
      setColor('#72ff6c');
    }
    if (value >= 0.3 && value < 0.5) {
      setColor('#ffe53e');
    }
    if (value < 0.3) {
      setColor('#e0002b');
    }
  }, [data]);
  const option: echarts.EChartsOption = {
    color: ['#165dff', `${color}`],
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '磁盘占用',
        type: 'pie',
        selectedMode: 'single',
        radius: [0, '80%'],

        label: {
          position: 'inner',
          formatter: (params) => {
            return params.percent.toFixed(0) + '%';
          }
        },
        data
      }
    ]
  };

  const [echartsRef] = useEcharts(option);

  // option && myChart.setOption(option);
  return (
    <>
      {useMemo(
        () => (
          <div style={{ height: '200px', width: '200px' }} ref={echartsRef}></div>
        ),
        [echartsRef]
      )}
    </>
  );
};
export default BasicPieChart;
